<template>
  <div class="app-container">
    <el-card class="mycard">
      <!-- 顶部 新增 -->
      <div class="head">
        <el-row class="myhead">
          <el-col :span="12">
            <el-form label-width="80px" ref="clearRef" :model="searchForm" :inline="true">
              <el-form-item label="学科名称" prop="content">
                <el-input size="small" class="myinput" v-model="searchForm.content"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button size="small" type="success" @click="addSub"><i class="el-icon-edit"></i> 新增学科</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 数据总条数 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon></el-alert>
      <!-- table 表格 -->
      <el-table class="mytable" :data="list">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="creator" label="创建者">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay == '1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column> -->
        <el-table-column prop="address" label="操作" width="300">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-button type="text" @click="toClassify">学科分类</el-button>
            <el-button type="text" @click="toTag">学科标签</el-button>
            <el-button type="text" @click="editShow(scope.row)">修改</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="pagesizes"
          layout="prev, pager, next, sizes, jumper"
          :page-size="pagesize"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增面板 -->
    <adddept :addShow.sync="addShow" :current.sync="current" @addCon="getList" ref="myadddept"></adddept>
    <!-- 修改面板 -->
    <el-dialog
      title="修改学科"
      :visible.sync="dialogShow"
      width="390px"
      :close-on-click-modal="false"
      :before-close="cancel"
    >
      <el-form label-width="80px" :model="editForm" :rules="myrules" ref="editRef">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="editForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="editForm.isFrontDisplay"
            inactive-color="#ff4949"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, update } from '@/api/hmmm/subjects.js'
import adddept from '@/module-hmmm/components/subjects-add.vue'
export default {
  components: {
    adddept
  },
  created() {
    this.getList()
  },
  data() {
    return {
      // 列表数据源
      list: [],
      // 当前页
      current: 1,
      // 页容量的集合
      pagesizes: [5, 10, 20, 50],
      // 页容量
      pagesize: 10,
      // 数据的总条数
      total: 0,
      // 创建者
      username: '',
      // 控制 修改 面板的显示与隐藏
      dialogShow: false,
      // 控制 新增 面板的显示与隐藏
      addShow: false,
      // 修改表单的数据对象
      editForm: {
        // 是否可见
        isFrontDisplay: '',
        // 学科名称
        subjectName: ''
      },
      // 搜索表单绑定数据
      searchForm: {
        content: ''
      },
      // 表单校验
      myrules: {
        subjectName: [{ required: true, message: '请输入活动名称', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 修改功能
    editShow(row) {
      this.dialogShow = true
      this.editForm = { ...row }
    },
    // 新增功能
    addSub() {
      this.addShow = true
    },
    // 搜索功能
    search() {
      this.subjectName = this.searchForm.content
      this.getList(this.subjectName)
    },
    // 清除功能
    clear() {
      this.$refs.clearRef.resetFields()
      this.getList({
        page: (this.current = 1),
        subjectName: (this.subjectName = '')
      })
    },
    // 取消按钮
    cancel() {
      this.$emit('update:addShow', false)
      this.$refs.addRef.resetFields()
      this.addForm.enVisible = 1
    },
    // 修改功能提交
    submit() {
      this.$refs.editRef.validate(async valid => {
        if (!valid) return
        const res = await update(this.editForm)
        if (res.data.success) {
          this.$message.success('操作成功')
          this.dialogShow = false
          this.getList()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 获取列表数据
    async getList() {
      const res = await list({
        subjectName: this.subjectName,
        page: this.current,
        pagesize: this.pagesize
      })
      // 保存列表数据源
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 删除功能
    async del(data) {
      this.$confirm('此操作将永久删除该学科, 是否继续?')
        .then(async () => {
          // 提交数据到服务器
          const res = await remove(data)
          if (res.data.success) {
            this.$message.success('删除成功')
            // 每当删除成功的时候，判断 list 数组的 length 是否为 1
            if (this.list.length === 1 && this.current > 1) {
              this.current--
            }
            // 更新数据
            this.getList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 当前页发生改变时触发
    handleCurrentChange(current) {
      this.current = current
      this.getList()
    },
    // 页容量发生改变时触发
    handleSizeChange(size) {
      this.pagesize = size
      this.getList()
    },
    // 跳转到分类页面
    toClassify() {
      this.$router.push('/subjects/directorys')
    },
    // 跳转到标签页面
    toTag() {
      this.$router.push('/subjects/tags')
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  margin: 0px;
  padding: 0px;
  .myhead {
    display: flex;
    justify-content: space-between;
    .myinput {
      width: 190px;
      margin-right: 10px;
    }
  }
  .mytable {
    margin-top: 12px;
  }
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
// .el-pagination__total {
// }
</style>
